<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="header-l">
                    <h1>电商运营平台</h1>
                    <el-icon>
                        <Grid />
                    </el-icon>
                </div>
                <div class="header-r">

                    <el-tooltip effect="light">
                        <template #content>
                            <div class="header-name">
                                <el-button type="primary" link @click="backHome">首页
                                </el-button>
                                <el-button type="primary" link @click="logout">退出
                                </el-button>
                            </div>
                        </template>
                        <div class="name" trigger="hover">
                            <p>{{ userName }}</p>
                            <el-icon>
                                <ArrowDown />
                            </el-icon>
                        </div>
                    </el-tooltip>

                </div>
            </el-header>
            <!-- 下面 -->
            <el-container>
                <!-- 左边 -->
                <el-aside>
                    <!-- 总菜单 -->
                    <el-menu background-color="#304156" text-color="white" active-text-color="#399ee4" router
                        unique-opened>
                        <el-sub-menu index="-1" popper-class="main" @click="router.push('/index')">
                            <!-- 首页 -->
                            <template #title>
                                <span>首页</span>
                            </template>
                        </el-sub-menu>

                        <template v-for="item in genMenus">
                            <!--一级菜单 -->
                            <el-sub-menu :index="item.id + ''">
                                <!-- 一级菜单名 -->

                                <template #title>
                                    <span>{{ item.title }}</span>
                                </template>
                                <!-- 二级菜单 -->
                                <template v-for="menusItem in item.submenus" key="menusItem.id">
                                    <el-menu-item :index="'/' + item.name + '/' + menusItem.name"
                                        v-if="!menusItem.hidden">{{
                                                menusItem.title
                                        }}
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>
                        </template>
                    </el-menu>
                </el-aside>
                <!-- 右边 -->
                <el-main>
                    <el-breadcrumb>
                        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="item in routers()"
                            style="display: {{item.name===undefined ?'none' ? 'block'}};">{{ item.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>

                    <div class="view">
                        <router-view></router-view>
                    </div>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { computed,  } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router'
import { LogoutAPI } from '../../request/api'
import Cookies from 'js-cookie'
import { ElMessage } from 'element-plus';

let router = useRouter()
let store = useStore()
let genMenus = computed(() => store.getters['user/genMenus'])

//  面包屑
function routers() {
    let routers = router.currentRoute.value.matched.map(item => {
        return { name: item.name, path: item.path }
    })
    if (routers[0].name === undefined) {
        return
    } else {
        return routers
    }
}


// 回首页
const backHome = () => {
    router.push('/index')
}
let userName = computed(() => store.state.user.username)

// 退出 
const logout = () => {
    LogoutAPI().then((res) => {
        Cookies.remove('token')
        router.push('/login')
        ElMessage.success('退出成功')
    })
}
</script>
<style lang = "less" scoped>
.header-name {

    display: flex;
    flex-direction: column;

    :deep(.el-button+.el-button) {
        margin: 0;
    }
}

:deep(.el-container) {

    .el-header {
        width: 100%;
        height: 70px;
        background-color: #409eff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24px;
        color: white;

        .header-l {
            display: flex;
            align-items: center;

            h1 {
                padding-right: 20px;
            }
        }

        .header-r {
            display: flex;
            align-items: center;
            font-size: 12px;

            p {
                padding-right: 10px;
            }
        }
    }

    .el-aside {
        width: 250px;
        background-color: #304156;
        height: calc(100vh - 70px);


        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .el-main {
        padding: 0;
        height: calc(100vh - 70px);

        .el-breadcrumb {
            position: fixed;
            width: 100%;
            z-index: 999;
            background-color: #fff;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }

        .view {
            position: relative;
            padding: 60px 20px 0 20px;
        }
    }
}

// #263445
:deep(.el-menu) {
    border-right: none;

    .el-sub-menu:hover {
        .el-sub-menu__title:hover {
            background-color: #263445 !important;
        }
    }

    .el-sub-menu:nth-child(1) {
        .el-sub-menu__title {

            color: #3e99fd !important;
        }

        .el-icon {
            display: none;
        }
    }
}

.name {
    cursor: pointer;
    display: flex;
    align-items: center;
}
</style>